<template>
  <div class="wh-full flex overflow-hidden bg-bg_color">
    <sidebar :active="module" v-if="module"></sidebar>
    <div class="flex-1 overflow-hidden flex">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import sidebar from '../normal/sidebar/sidebar.vue'
import { usePermissionStore } from '@/store'

const route = useRoute()
const { permissions } = usePermissionStore()

const getParent = (name: string): string => {
  const permission = permissions.find((p) => p.code == name)
  if (permission && permission!.parentId) {
    const parent = permissions.find((p) => p.id == permission.parentId)
    if (parent) {
      return getParent(parent.code!)
    } else {
      return name
    }
  } else {
    return name
  }
}

const module = computed(() => {
  const name = route.meta?.parentKey || route.name
  return getParent(name as string)
})
</script>
